<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		DOM的节点的操作：<br />
		1 创建元素<br />
				方式一： document.write()<br />
				方式二： 元素.innerHTML<br />
				方式三：document.createElement("div")<br />
		<input type="button" name="" id="" value="创建" onclick="fun();"/>
		<div id="box">
			
		</div>
		<script type="text/javascript">
			function fun(){
				var box = document.getElementById("box");

				for (var i=0; i<=9; i++) {
					box.innerHTML += " <input type='text'  value='wen' /><br/>";
				}
				
				var array = [];
				for (var i=0; i<=9; i++) {
					array.push(" <input type='text'  value='文字' /><br/>");
				}
				console.log(array.join(""));
			}
		</script>
		<div id="wrap">
			
		</div>
		<script type="text/javascript">
			//在页面div中添加一个子元素，并且子元素的文本是动态创建的
			
			//1 先创建子元素
			var div_son = document.createElement("div");
			var p_son = document.createElement("p");
			//2 给儿子添加文本
			
			div_son.innerHTML = "我是动态创建的";
			//3 追加元素 父亲.append
			
			var divObj = document.getElementById("wrap");
			divObj.appendChild(div_son);
			divObj.insertBefore(p_son,div_son); //在 div_son 之前 插入p_son
		</script>
		
		2 追加元素
		 	父亲.appendChild
		 	父亲.insertBefore(儿子，参考)
		 	3 删除元素
		 	
		 	
	</body>
</html>
